<template>
  <!-- 标签详情 -->
  <el-card>
    <header style="display: flex;justify-content: space-between;align-items: center;">
      <h4>标签详情</h4>
      <el-button type="primary" plain size="mini" @click="$router.go(-1)">返回</el-button>
    </header>

    <div style="margin: 20px 10px;">
      <header style="display: flex;align-items: center;margin-bottom: 10px;">
        <h2>{{ pageData.tagName || '' }}</h2>
        <!-- <span class="header-tag">正常运行</span> -->
        <span :class="['header-tag', 'tag-' + pageData.caculationState || 'NORMAL']">
          {{ state[pageData.caculationState || 'NORMAL'] }}</span>
        <!-- 已暂停 -->
      </header>
      <p>{{ pageData.tagRule || '' }}</p>
      <!-- 通过事件偏好属性的规则，使用用户在 2023-06-13 至 2023-06-29，完成投保保单支结果的险种名称出现次数最多的前10个险种名称作为标签的值，对用户进行标记 -->
    </div>

    <div style="display: flex;justify-content: space-between;align-items: center;">
      <h3 style="margin-left: 10px;">标签人数分布</h3>
      <div style="width: 40%;">
        <el-select v-model="operateForm.number" placeholder="排名" @change="selectChange(operateForm)"
          style="width: 35%;margin-right: 3%;">
          <el-option v-for="item in numberOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="operateForm.sequence" placeholder="数据排序方式" @change="selectChange(operateForm)"
          style="width: 62%;">
          <el-option v-for="item in sequenceOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <el-divider class="divider-self"></el-divider>
    <div>
      <span>标签覆盖总人数：</span>
      <span style="font-size: 18px;">{{ pageData.count || 0 }}</span>
      <span>人 计算完成时间：</span>
      <span>{{ pageData.caculationTime || ' ' }}</span>
    </div>

    <div class="ClientsDetails" :style="{ 'height': height + 'px' }"></div>
  </el-card>
</template>
<script>
import { searchCalTagDeatil } from '@/api/customer/label'
import * as echarts from 'echarts'
const colors = ['#FFC06B', '#3E96E6', '#B5FDFF', '#FEFA84', '#DF8790', '#CDF784',]
export default {
  name: "LabelDetail",
  data() {
    return {
      state: {
        NORMAL: '正常运行',
        STOPPED: '已暂停',
      },
      pageData: { caculationState: 'NORMAL' },
      operateForm: {
        number: '5',
        sequence: 'desc'
      },
      numberOptions: [
        {
          value: '5',
          label: '前5项'
        },
        {
          value: '10',
          label: '前10项'
        },
        {
          value: '15',
          label: '前15项'
        },
        {
          value: '20',
          label: '前20项'
        },
        {
          value: '25',
          label: '前25项'
        },
        {
          value: '30',
          label: '前30项'
        },
        {
          value: '50',
          label: '前50项'
        },
      ],
      sequenceOptions: [{
        value: 'desc',
        label: '按照标签覆盖人数降序'
      },
      {
        value: 'asc',
        label: '按照标签覆盖人数升序'
      },],
      myChartFour: null,
      height: 180,
      optionsClientsDetails: {
        color: '#10AEFF',
        legend: {
          show: false,
          right: 20,
          // icon: 'circle'
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          nameGap: 5,
          boundaryGap: 5,
          axisLabel: {
            show: true,
            fontSize: 16,
            color: '#000',
            fontWeight: 'bold'
          },
          // data: ['快手', '英俊大超市', '企微']
        },
        tooltip: {
          trigger: 'axis',
          show: true,
          formatter: `{b}:{c} \n\n`
        },
        series: [
          {
            barWidth: '40',
            type: 'bar',
            itemStyle: {
              borderRadius: 5,
              color: (param) => colors[param.dataIndex % colors.length]
            },
            label: {
              show: true,
              position: 'right',
              formatter: label => `${label.data.countPeople}人  ${label.data.percent}`
            },
          }
        ]
      }
    }
  },
  mounted() {
    this.operateForm.mainId = this.$route.query.mainId
    this.myChartFour = echarts.init(document.querySelector('.ClientsDetails'))
    this.getEchartsFour()
  },
  methods: {
    getEchartsFour() {
      searchCalTagDeatil(this.operateForm).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.pageData = res.data;
          let data = this.pageData.scrmCalTagCountDTOS,
            //   {
            //     "count": 4,
            //     "customerSourceName": "快手",
            //     "insuranceType": "创新"
            //   },
            //   {
            //     "count": 1,
            //     "customerSourceName": "英俊大超市",
            //     "insuranceType": "创新"
            //   },
            //   {
            //     "count": 2,
            //     "customerSourceName": "企微",
            //     "insuranceType": "创新"
            //   }, {
            //     "count": 4,
            //     "customerSourceName": "快手",
            //     "insuranceType": "创新"
            //   },
            //   {
            //     "count": 1,
            //     "customerSourceName": "英俊大超市",
            //     "insuranceType": "创新"
            //   },
            //   {
            //     "count": 2,
            //     "customerSourceName": "企微",
            //     "insuranceType": "创新"
            //   }, {
            //     "count": 4,
            //     "customerSourceName": "快手",
            //     "insuranceType": "创新"
            //   },
            //   {
            //     "count": 1,
            //     "customerSourceName": "英俊大超市",
            //     "insuranceType": "创新"
            //   },
            //   {
            //     "count": 2,
            //     "customerSourceName": "企微",
            //     "insuranceType": "创新"
            //   },
            // ],
            sourceData = data.map(item => item.tag) || [],
            countData = data.map(item => {
              item.value = item.percent ? item.percent.split('%')[0] : 0
              return item;
            }) || []
          this.optionsClientsDetails.height = data.length * 60
          this.height = 180 + data.length * 50
          // console.log('sourceData', sourceData);
          // console.log('countData', countData, this.myChartFour);

          this.optionsClientsDetails.yAxis.data = sourceData
          this.optionsClientsDetails.series[0].data = countData

          this.$nextTick(() => {
            this.myChartFour.setOption(this.optionsClientsDetails)
            this.myChartFour.resize()
          })
        } else this.$message.error(res.msg)
      })

    },

    selectChange() {
      this.getEchartsFour()
    },
  }
}
</script>
<style lang="scss" scoped>
.flex-box {
  display: flex;
}

.header-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 8px;
  border-radius: 3px;
}

.tag-NORMAL {
  background-color: #CCF783;
  color: #88AC4A;
}

.tag-1 {
  background-color: #fef0f0;
  color: #f56c6c;
}

.divider-self {
  margin: 10px 0;
}

.ClientsDetails {
  width: 100%;
  // height: 180px;
  // height: 230px;
  // height: 280px;
  // height: 400px;
  // height: 100%;
  // overflow: scroll;
}
</style>